<template>
  <div class="page">
    <i class="iconfont icon-fanhui" @click="$router.push('/index/shop')"></i>
    <header class="header">
      <div class="shouh" @click="$router.push('/address')">
        <div class="k">
          <p class="dizhi">+点击完善收货地址</p>
        </div>
      </div>

       <div class="shouh" v-if="addressInfo.id" @click="$router.push('/xaddress?id='+addressInfo.id)">
        <h2>{{addressInfo.username}} {{addressInfo.userphone}}</h2>
        <p>{{addressInfo.location+ addressInfo.useraddress}}</p>
      </div>
    </header>
    <div class="jingxuan clearfix">
      <div class="fl">
        <img :src='require("../../assets/img/selfsupport.png")'>
        <h4>品牌精选</h4>
      </div>
      <div class="fr">
        <a href="#">以免运费</a>
        <span></span>
        <a href="#" class="a1">领劵</a>
      </div>
    </div>
    <div class="neirong clearfix" v-for="item in list " :key="item.id"> 
      <div class="pic fl">
        <img :src='$pre+item.img' alt="pic">
      </div>
      <div class="zi fr">
        <h2>{{item.goodsname}}</h2>
        <div class="p2 clearfix">
          <p class="fl">
            <span>&yen;</span>{{item.price}}
          </p>
          <a href="#" class="fr">{{item.num}}</a>
        </div>
        <p class="p3 fl">7天无理由退货</p>
        <p class="p4 fl">特价</p>
      </div>
    </div>
    <div class="lei clearfix">
      <div class="lei1">
        <p class="fl">发票类型</p>
        <a href="#" class="fr">
          不开发票
          <em class="iconfont">&#xe63c;</em>
        </a>
      </div>
      <div class="lei1">
        <p class="fl">售后免邮</p>
        <a href="#" class="fr bb">部分商家赠送</a>
      </div>
      <div class="lei1">
        <p class="fl">卖家留言</p>
        <a href="#" class="fr bb">填写内容需要与商家协商并确认，45字以内</a>
      </div>
    </div>
    <div class="jin">
      <div class="lei2">
        <p class="fl">商品金额</p>
        <a href="#" class="fr">
          &yen;
          <em>{{addressInfo.price}}</em>
        </a>
      </div>
      <div class="lei3">
        <p class="fl">优惠活动</p>
        <a href="#" class="fr">-&yen;200</a>
      </div>
      <div class="lei3">
        <p>
          优惠券
          <span>更多优惠劵</span>
        </p>
      </div>
    </div>

    <div class="fff">
      <div class="footer">
        <div class="fl">
          <div class="top">
            <p>
              合计
              <span>&yen;{{addressInfo.price-200}}</span>
            </p>
          </div>
          <div class="x">
            <p>
              已免运费
              <span>以优惠&yen;200元</span>
            </p>
          </div>
        </div>
        <div class="fr" @click="topayment">
          <div class="q">
            <a href="javascript:;" >确认订单</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import {reqcartlist,reqAddressList,reqorderadd} from "../../http/api"
export default {
  data(){
    return{
      addressInfo: {},
      list:[],
    }
  },
mounted(){
  if(this.$route.query.addressId){
    reqAddressList({
      uid:JSON.parse(localStorage.getItem("user")).uid,
      id:this.$route.query.addressId
    }).then(res=>{
      this.addressInfo=res.data.list[0]
       this.addressInfo.price=JSON.parse(localStorage.getItem("order")).price;
      // console.log(JSON.parse(localStorage.getItem("order")));
      // console.log(this.addressInfo);
    })
  }
  this.addressInfo.price=JSON.parse(localStorage.getItem("order")).price;

  let idstr = JSON.parse(localStorage.getItem("order")).idstr;
    idstr.split(",").forEach((item) => {
      reqcartlist({
        uid: JSON.parse(localStorage.getItem("user")).uid,
        id: item,
      }).then((res) => {
        this.list.push(res.data.list[0]);
          // console.log(this.list);
      });
    });
},methods:{
   topayment(){
     
      let json=JSON.parse(localStorage.getItem("order"))
      //生成订单
      reqorderadd({
        uid:JSON.parse(localStorage.getItem("user")).uid,
        addressid:this.$route.query.addressId,
        ...json
      }).then(res=>{
        this.$router.push("/payment?orderId="+res.data.list.outTradeNo+"&price="+this.addressInfo.price)
      })
    }
}
};
</script>

<style scoped>
i {
  font-size: 0.5rem;
  z-index: 2;
  position: fixed;
  top: 0.18rem;
  left: 0.2rem;
  color: #fff;
}
.page {
  max-width: 750px;
  min-width: 320px;
  margin: 0 auto;
}
.jiao {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 1.17rem;
  border-top: 1px solid #cccccc;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.jiao a {
  display: block;
  text-align: center;
}
.jiao a:first-child p {
  color: #ff6040;
}
.jiao a img {
  height: 0.4rem;
  width: auto;
}
.jiao p {
  font: 0.2rem/0.49rem "微软雅黑";
  color: #9b9b9b;
}
.header {
  background-image: linear-gradient(180deg, #ff6040, #ff7b68);
}
form {
  position: relative;
}
form input {
  width: 3.36rem;
  height: 0.6rem;
  border: 0.02rem solid #e6e6e6;
  background: #ffffff;
  text-indent: 0.67rem;
  border-radius: 0.05rem;
  font: 0.27rem/0.6rem "微软雅黑";
  color: #999999;
}
form .ss {
  position: absolute;
  left: 0.14rem;
  top: 0.15rem;
  color: #9a9a9a;
}
.page {
  background: #f2eceb;
}
.header {
  height: 1.8rem;
  position: relative;
}
.shouh {
  position: absolute;
  left: 0.2rem;
  top: 0.2rem;
  width: 6.8rem;
  height: 2.07rem;
  background: white;
  border-radius: 0.1rem;
}
.shouh h2 {
  font: 0.39rem "微软雅黑";
  color: black;
  margin-top: .4rem;
  margin-left: .42rem;
  margin-bottom: .3rem;
}
.shouh p {
  font: 0.29rem "微软雅黑";
  color: #666666 ;
  /* margin-left: .43rem; */
}

.shouh .k{
  width: 3rem;
  height: 1rem;
  background-color: rgb(255, 230, 221);
  border: 1px solid orange;
  margin: 0  auto;
  margin-top: .5rem;
}
.shouh .k .dizhi{
  color: orange;
  font-size: .32rem;
  line-height: 1rem;
}
.jingxuan {
  margin-top: 0.68rem;
  background: white;
}
.jingxuan .fl {
  height: 0.8rem;
  display: flex;
  align-items: center;
}
.jingxuan .fl img {
  margin: 0 0.22rem 0 0.2rem;
}
.jingxuan .fl h4 {
  font: 0.31rem "微软雅黑";
  color: black;
}
.jingxuan .fr {
  height: 0.8rem;
  display: flex;
  align-items: center;
}
.jingxuan .fr a {
  font: 0.24rem "微软雅黑";
  color: #3c3c3c;
}
.jingxuan .fr span {
  width: 0.02rem;
  height: 0.22rem;
  background: #979797;
  margin: 0 0.2rem 0 0.21rem;
}
.jingxuan .fr .a1 {
  font: 0.24rem "微软雅黑";
  color: #ff6e51;
  margin-right: 0.21rem;
}
.neirong {
  padding-top: 0.4rem;
  background: white;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}
.neirong .pic img {
  width: 2.16rem;
}
.neirong .zi {
  width: 4.64rem;
}
.neirong .zi h2 {
  font: 0.32rem/0.44rem "微软雅黑";
  color: black;
}
.neirong .zi .p2 p {
  margin-top: 0.24rem;
  font: 0.41rem/0.49rem Arial;
  color: #ff6040;
}
.neirong .zi .p2 p span {
  margin-top: 0.19rem;
  font: 0.2rem/0.33rem Arial;
  color: #989898;
}
.neirong .zi .p2 a {
  color: black;
  margin-right: 0.23rem;
  font: 0.35rem Arial;
  margin-top: 0.25rem;
}
.neirong .zi .p3 {
  margin-top: 0.26rem;
  width: 1.66rem;
  height: 0.32rem;
  background: #ff8066;
  font: 0.19rem/0.37rem "微软雅黑";
  color: white;
  text-align: center;
}
.neirong .zi .p4 {
  margin-top: 0.26rem;
  width: 0.52rem;
  height: 0.32rem;
  background: #ff8066;
  font: 0.19rem/0.37rem "微软雅黑";
  color: white;
  text-align: center;
  margin-left: 0.1rem;
}
.lei {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  padding-top: 0.4rem;
  padding-bottom: 0.2rem;
  background: white;
}
.lei .lei1 {
  height: 0.63rem;
}
.lei .lei1 p {
  font: 0.24rem "微软雅黑";
  color: #333333;
}
.lei .lei1 a {
  font: 0.24rem "微软雅黑";
  color: #333333;
}
.lei .lei1 a em {
  font-size: 0.24rem;
  margin-left: 0.16rem;
}
.jin {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  margin-top: 0.2rem;
  height: 1.72rem;
  background: white;
  padding-top: 0.19rem;
}
.jin .lei2 {
  height: 0.64rem;
}
.jin .lei2 p {
  font: 0.24rem "微软雅黑";
  color: #333333;
}
.jin .lei2 a {
  font: 0.24rem "微软雅黑";
  color: #333333;
}
.jin .lei3 {
  height: 0.64rem;
}
.jin .lei3 p {
  font: 0.24rem "微软雅黑";
  color: #333333;
}
.jin .lei3 a {
  font: 0.24rem "微软雅黑";
  color: #ff6040;
}
.fff {
  position: relative;
}
.fff .footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  background: white;
  border-top: 1px solid #cccccc;
}
.fff .footer .fl .top p {
  font: 0.22rem "微软雅黑";
  color: black;
}
.fff .footer .fl .top p span {
  color: #ff6040;
  margin-left: 0.64rem;
}
.fff .footer .fl .x {
  margin-top: 0.11rem;
}
.fff .footer .fl .x p {
  font: 0.19rem "微软雅黑";
  color: #cfcfcf;
}
.fff .footer .fl .x p span {
  margin-left: 0.36rem;
}
.fff .footer .fr {
  width: 2.2rem;
  height: 0.98rem;
  background: #ff6040;
}
.fff .footer .fr .q {
  text-align: center;
}
.fff .footer .fr .q a {
  font: bold 0.32rem/0.98rem "微软雅黑";
  color: white;
}
</style>